<template>
  <div class="alloc-menu">
    <el-card>
      <el-button @click="$router.push({ name: 'role' })">后退</el-button>
      <el-tree
        :data="dataTree"
        :props="defaultProps"
        show-checkbox
        default-expand-all
        :default-checked-keys="checkedKeys"
        node-key="id"
        ref="menu-tree"
      ></el-tree>
      <div style="margin:20px">
        <el-button @click="onDelete">清空</el-button>
        <el-button type="primary" @click="onSave">保存</el-button>
      </div>
    </el-card>
  </div>
</template>
<script>
import { getMenuNodeList, getAllocateRoleMenus, getRoleMenus } from '@/services/menu'
export default {
  name: 'AllocMenu',
  props: {
    roleId: {
      type: [Number, String],
      required: true
    }
  },
  data () {
    return {
      dataTree: [],
      defaultProps: {
        children: 'subMenuList',
        label: 'name'
      },
      checkedKeys: []
    }
  },
  created () {
    // 加载所有菜单信息（用于展示 tree 解构）
    this.loadMenuNodeList()
    // 加载当前角色已经分配的菜单信息
    this.loadRouseMenus()
  },
  methods: {
    // 自己封装的用于数据筛选的方法 （筛选出被选中菜单项ID）
    getCheckedKey (menus) {
      // 遍历数据（将所有存在于 子节点node 排除，对子节点列表进行筛选）
      menus.forEach(data => {
        // 未选中 结束
        if (!data.selected) return
        // 检测是否存在于子节点
        if (data.subMenuList) {
          // 对子节点进行选中状态检测 结束
          return this.getCheckedKey(data.subMenuList)
        }
        // 说明为选中的叶子节点 （不存在子节点的节点） 存储 ID
        // this.checkedKeys.push(menu.id)
        this.checkedKeys = [...this.checkedKeys, data.id]
      })
    },
    async loadRouseMenus () {
      const { data } = await getRoleMenus(this.roleId)
      console.log(data)
      if (data.code === '000000') {
        this.getCheckedKey(data.data)
      }
    },
    async loadMenuNodeList () {
      const { data } = await getMenuNodeList()
      // console.log(data)
      if (data.code === '000000') {
        this.dataTree = data.data
      }
    },
    async onSave () {
      const { data } = await getAllocateRoleMenus({
        roleId: this.roleId,
        menuList: this.$refs['menu-tree'].getCheckedKeys()
      })
      if (data.code === '000000') {
        this.$message.success('添加成功')
        this.$router.push({ name: 'role' })
      }
    },
    onDelete () {
      this.$refs['menu-tree'].setCheckedKeys([])
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
